@charset "UTF-8";
@import "function";
@import (reference) "variable";

/*全局基础*/
*, :after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.5);
  width: 0;
}

html {
  font-family: @font-family-YaHei;
  font-size: 62.5%;
  line-height: 1.6;
}

body {
  font-size: @fs-12;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

div, span, a, header {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

label {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a, a:hover, a:focus {
  text-decoration: none;
}

input, input:focus, textarea, textarea:focus, select {
  outline: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  font-family: @font-family-YaHei;
  font-size: @fs-12;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

b, strong, i, em {
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: @fs-14;
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

iframe, img {
  border: 0 none;
}

/*雪碧图*/
.sprite {
  display: block;
  background: url("@{img}/sprite.png") no-repeat;
  background-size: 300px 300px;
  &.scale {
    background-size: 600px 600px;
    transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
  }
  &.zoom {
    background-size: 600px 600px;
    zoom: 0.5;
  }
}

.sprite-state {
  display: block;
  position: relative;
  background: url("@{img}/state-new.png") no-repeat;
  background-size: 411px 203px;
  transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
}

/*布局*/
.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.d-in-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-inline {
  display: inline;
}

.p-rel {
  position: relative;
  z-index: 30;
}

.p-abs {
  position: absolute;
  z-index: 30;
}

.p-fix {
  position: fixed;
  z-index: 30;
}

.relative {
  .p-rel !important;;
}

.absolute {
  .p-abs !important;
}

.fixed {
  .p-fix !important;;
}

.abs-tl {
  .absolute;
  top: 0;
  left: 0;
}

.abs-bl {
  .absolute;
  bottom: 0;
  left: 0;
}

.abs-tr {
  .absolute;
  bottom: 0;
  right: 0;
}

.abs-br {
  .absolute;
  bottom: 0;
  right: 0;
}

.abs-tl-mid {
  .absolute;
  top: 50%;
  left: 50%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fl-none {
  float: none;
}

.clearfix {
  &:after {
    display: block;
    content: "";
    clear: both;
    visibility: visible;
    overflow: hidden;
    height: 0;
    zoom: 1
  }
}

.fb-wrap-height {
  height: 100%;
}

//盒子布局
.wrap {
  .layer-box;
  &.image {
    background: #7919e7 url("../img/new-bg.jpg") no-repeat top;
    background-size: 100% auto;
  }
  &.height {
    height: 100%;
  }
  &.top {
    padding-top: @base*44;
    &.small {
      padding-top: @base*30;
    }
    &.big {
      padding-top: @base*85;
    }
  }
  &.bto {
    padding-bottom: @base*52;
    &.small {
      padding-bottom: @base*30;
    }
    &.big {
      padding-bottom: @base*90;
    }
    &.bto-64 {
      padding-bottom: @base*64;
    }
  }
  &.background {
    background: @white;
    &.white {
      background: @white;
    }
    &.g-f5 {
      background: @g-f5f5;
    }
    &.g-f2 {
      background: @g-f2f2;
    }
  }
}

.overflow-hide {
  .layer-box-height;
  overflow: hidden;
}

.overflow {
  .layer-box;
  z-index: 30;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  &.hide {
    overflow-y: hidden;
  }
}

//图片
.fb-img-box {
  .layer-box;
}

/*列表布局*/
.fb-box-list {
  .layer-box;
  &.no-mar {
    & > ul li {
      margin-bottom: 0;
    }
  }
  & > ul {
    margin: 0;
    padding: 0;
    zoom: 1;
    &:after {
      display: block;
      content: "";
      clear: both;
      visibility: visible;
      height: 0;
      zoom: 1;
    }
    li {
      margin-bottom: 10px;
    }
    & > li {
      .layer-box;
      .fl;
    }
    &.row-1 {
      & > li {
        width: 100%;
      }
    }
    &.row-2 {
      & > li {
        width: 50%;
      }
    }
    &.row-3 {
      & > li {
        width: 33.33%;
      }
    }
    &.row-4 {
      & > li {
        width: 25%;
      }
    }
    &.row-5 {
      & > li {
        width: 20%;
      }
    }
    &.row-6 {
      & > li {
        width: 16.66%;
      }
    }
  }
}

/*模块*/
.fb-module {
  .layer-box;
  &.pad {
    padding: 0 20px;
  }
  &.gray {
    background: @g-f5f5 !important;
  }
  &.white {
    background: @white;
  }
  .m-title {
    .layer-box;
    .text-middle(44px);
    .border-bto(1px solid #c4c4c4);
    background: @white;
    font-size: @fs-14;
    color: @g-333;
    padding: 0 20px;
    &.auto {
      height: auto;
      line-height: 20px;
      padding: 10px 0;
    }
    > em {
      font-size: @fs-12;
      color: @g-666
    }
    &.no-bd {
      border-bottom: 0 none;
    }
    &.border-light {
      border-bottom: 1px solid #e4e4e4;
    }
    &.no-pad {
      padding: 0;
    }
  }
  .m-cont {
    .layer-box;
    padding: 0 20px;
    &.pad {
      padding: 10px 20px;
    }
    &.no-pad {
      padding: 0;
    }
    &.top-pad {
      padding: 10px 0;
    }
  }
}

/*手风琴*/
.fb-slide-list {
  &.gray {
    dl dd {
      background: @g-f5f5;
      margin-left: 0;
      padding: 5px 15px;
      border-bottom: 1px solid #e4e4e4;
    }
  }
  &.border {
    dl dt {
      border-bottom: 1px solid #e4e4e4;
    }
  }
  .layer-box;
  dl {
    .layer-box;
    padding: 10px 0;
    margin: 0;
    dt {
      .p-rel;
      .text-middle(42px);
      font-size: 1.4rem;
      a {
        .layer-box-height;
        color: @g-333;
        i {
          .p-abs;
          top: 50%;
          right: 0;
          margin-top: -6px;
          transition: transform 0.2s linear;
          -webkit-transition: -webkit-transform 0.2s linear;
        }
        &.active {
          i {
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
          }
        }
      }
    }
    dd {
      margin: 0 0 0 10px;
      display: none;
      &.active {
        display: block;
      }
      a {
        .layer-box;
        font-size: @fs-14;
        line-height: 22px;
        padding: 5px 0;
        color: @g-666;
        label {
          .layer-box;
          padding-left: 12px;
          em {
            .p-abs;
            top: 0;
            left: 0;
            .d-block;
            height: 20px;
            line-height: 18px;
            color: @g-666;
            font-size: 2.0rem;
            font-weight: bold;
          }
        }
        label.has-tag {
          &:before {
            content: "";
            .set-layout("block", 5px, 5px);
            .border-radius(50%);
            background: @g-666;
            .p-abs;
            top: 50%;
            left: -12px;
            margin-top: -3px;
          }
        }
      }
    }
  }
}

/*列表*/
.fb-list {
  .layer-box;
  &.pad {
    padding: 0 20px;
    > .item {
      margin: 0;
      padding: 10px 0;
    }
  }
  &.border {
    > .item {
      border-bottom: 1px solid #e4e4e4;
    }
  }
  > .item {
    .layer-box;
    margin: 20px 0;
    padding: 10px;
    background: @white;
    &.small {
      padding: 0;
      margin: 0 0 10px 0;
    }
  }
}

/*列表-加载*/
.list-loading {
  .layer-box;
  .text-middle(36px);
  text-align: center;
  color: #aaaaaa;
  margin: 10px 0;
  &.background {
    background: @white;
    margin: 0;
    height: auto;
    padding-bottom: 10px;
  }
  &.g-f5 {
    background: @g-f5f5;
    margin: -10px 0 0 0;
  }
  &.margin {
    margin: -10px 0 10px 0;
  }
  i {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
    margin-right: 3px;
  }
  img {
    .layer-box-height;
  }
  span {
    color: @g-666;
    font-size: @fs-12;
  }
}

/*进度条*/
.fb-progress {
  &.gradient {
    .set-layout("block", 100%, 6px, "relative");
    background-color: #c4c4c4;
    //background-image: -webkit-linear-gradient(top, #999, #212121);
    //background-image: linear-gradient(top, #999, #212121);
    //.fn-box-shadow(0 -2px 2px rgba(0, 0, 0, 0.4) inset);
  }
  & > .runner {
    .layer-box-height;
    .p-abs;
    .fn-pos-tl(0, 0);
    background-color: transparent;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FFAD00), to(#FE3030));
    background-image: linear-gradient(linear, 0% 0%, 100% 0%, from(#FFAD00), to(#FE3030));
    .border-radius(3px);
    &.finished {
      .border-radius(3px 0 0 3px);
      z-index: 999;
    }
    &.unfinished{
      background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#06cfff), to(#0386ff));
      background-image: linear-gradient(linear, 0% 0%, 100% 0%, from(#06cfff), to(#0386ff));
    }
  }
  .meter {
    .p-abs;
    .fn-pos-tr(0, 0);
    .text-color(#ff4e4d);
    text-shadow: 0 -1px 0 #cfcfcf;
    -webkit-text-shadow: 0 -1px 0 #cfcfcf;
    margin-top: 10px;
    font-size: @fs-12;
  }
}

/*表单-输入框*/
.user-form {
  .p-rel;
  .d-block;
  .text-middle(40px);
  .border-all(1px solid #cfcfcf);
  .border-radius(3px);
  padding: 0 10px;
  background: @white;
  &.line-block {
    display: inline-block;
  }
  &.no-br {
    .border-radius(0);
  }
  &.height {
    height: auto;
  }
  &.radius {
    .border-radius(15px);
    padding: 0 20px;
    a.clean-btn, .search-btn {
      right: 10px !important;
    }
  }
  &.before-text {
    padding-left: 35px;
    &.pad-small {
      padding-left: 26px;
      em {
        font-size: @fs-14;
        width: 30px;
      }
    }
    em {
      .p-abs;
      left: 0;
      top: 50%;
      margin-top: -15px;
      font-size: @fs-12;
      display: block;
      width: 40px;
      .text-middle(30px);
      text-align: center;
      color: @error-color;
      i {
        .p-abs;
        .fn-pos-tl(50%, 50%);
      }
    }
  }
  &.small {
    .text-middle(30px);
    a.clean-btn, .search-btn {
      width: 30px !important;
      height: 30px !important;
      margin-top: -15px !important;
    }
    input {
      &[type="text"], &[type="password"], &[type="number"] {
        .text-middle(16px);
        margin: 5px 0 0 0;
        font-size: @fs-12;
      }
    }
  }
  &.error {
    .border-all(1px solid @error-color);
    input {
      color: @error-color;
    }
  }
  &.clean {
    padding-right: 40px;
    a.clean-btn, .search-btn {
      .d-none;
      .p-abs;
      top: 50%;
      right: 0;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      i {
        .p-abs;
        .fn-pos-tl(50%, 50%);
      }
    }
    a.search-btn {
      .d-block;
    }
  }
  input {
    &[type="text"], &[type="password"], &[type="number"] {
      .layer-box;
      .text-middle(20px);
      border: 0 none;
      font-size: @fs-14;
      background: transparent;
      margin-top: 9px;
    }
  }
  textarea {
    .layer-box;
    background: transparent;
    border: 0 none;
    font-size: @fs-14;
    line-height: 20px;
    height: 120px;
    padding: 5px 0;
    resize: none;
  }
}

/*列表-输入框*/
.list-input {
  .layer-box;
  padding-left: 80px;
  .text-middle(42px);
  border-bottom: 1px solid #e4e4e4;
  background: @white;
  &.no-bd {
    border-bottom: 0 none;
  }
  &.top-bd {
    border-top: 1px solid #e4e4e4;
  }
  > span {
    .set-layout("block", 80px, 100%, "absolute");
    top: 0;
    left: 0;
    color: @g-333;
    font-size: @fs-14;
  }
  > input {
    .layer-box;
    .text-middle(20px);
    border: 0 none;
    font-size: @fs-12;
    background: transparent;
    top: 11px;
  }
}

/*表单-复选框*/
.fb-check-box {
  .p-rel;
  .d-block;
  font-size: @fs-13;
  &.active {
    em {
      background: @blue-user;
      .border-all(1px solid @blue-user);
      & > i {
        .d-block;
        .p-abs;
        .fn-pos-tl(50%, 50%);
        margin: -4px 0 0 -6px;
      }
    }
  }
  em {
    .p-rel;
    .fn-pos-tr(4px, 0);
    .set-layout("inline-block", 18px, 18px);
    .border-radius(3px);
    .border-all(1px solid @g-999);
    background: transparent;
    .cursor-pointer;
    margin: 0 3px 0 0;
    & > i {
      .d-none;
    }
    & > input[type="checkbox"] {
      .layer-box-height;
      .p-abs;
      .fn-pos-tl(0, 0);
      opacity: 0;
      .cursor-pointer;
      margin: 0;
      -webkit-appearance: checkbox;
    }
  }
}

/*表单-switch开关*/
.fb-switch {
  .set-layout("block", 49px, 24px);
  overflow: hidden;
  background: @g-999;
  .border-radius(3px);
  padding: 2px;
  .fn-transition(all 0.3s ease);
  &.active {
    background: @blue-2c97ff;
    label.box {
      left: 25px;
    }
  }
  &.radius {
    .border-radius(15px);
  }
  label.box {
    .layer-box-height;
    left: 0;
    width: 70px;
    .fn-transition(all 0.3s ease);
    span {
      .set-layout("block", 25px, 100%);
      z-index: 100;
      .fl;
      &.btn {
        .set-layout("block", 20px, 20px);
        .border-radius(50%);
        background: @white;
      }
      &.on, &.off {
        color: @white;
        line-height: 20px;
        font-size: @fs-12;
        text-align: center;
      }
    }
    input[type="checkbox"] {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;
    }
  }
}

/*菜单切换*/
.fb-tab-bar {
  .layer-box;
  &.pad-top {
    padding-top: 54px;
    .fb-tab-menu {
      .abs-tl;
    }
  }
  .fb-tab-menu {
    @h: 44px;
    .layer-box;
    height: @h;
    &.white {
      background: @white;
    }
    //swiper
    .swiper-container {
      width: 100%;
      height: 100%;
      border-bottom: 1px solid #e4e4e4;
      .swiper-slide {
        float: left;
        width: 22%;
        .text-middle(43px);
        text-align: center;
        color: @g-333;
        font-size: @fs-14;
        &.active {
          color: @blue-user;
          border-bottom: 2px solid @blue-user;
        }
      }
    }
    //小红点
    .tag {
      .p-rel;
      top: -8px;
      left: 4px;
      .d-in-block;
    }
    &.big {
      li a {
        font-size: @fs-15;
      }
    }
    li {
      .text-middle(@h);
      text-align: center;
      a {
        .p-rel;
        .d-block;
        border-bottom: 2px solid #c4c4c4;
        font-size: @fs-12;
        color: @g-333;
        &.active {
          color: @blue-2c97ff;
          border-bottom: 2px solid @blue-2c97ff;
        }
        &.current {
          color: @blue-2c97ff;
          font-weight: bold;
        }
      }
    }
    .tab-line {
      position: absolute;
      bottom: -2px;
      left: 0;
      z-index: 1001;
      border-bottom: 2px solid @blue-2c97ff;
      display: block;
      width: 20%;
      .fn-transition(left 0.3s ease);
    }
  }
  .fb-tab-cont {
    .layer-box;
    margin-top: 2px;
  }
  .fb-tab-loading {
    &:extend(.fb-list-loading all);
  }
  .swiper-container {
    .swiper-loading {
      background-color: rgba(255, 255, 255, 0.5);
      background-image: url("@{img}/ggc-loading.gif");
      background-size: 120px 120px;
    }
    img {
      .layer-box;
    }
  }
}

//列表加载
.fb-list-loading {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.5) url("@{img}/ggc-loading.gif") no-repeat center;
  background-size: 120px 120px;
}

/*快捷菜单*/
.fb-menu-dir {
  .layer-box;
  padding-left: 20px;
  background: @white;
  &.border {
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
  }
  &.small {
    padding-left: 0;
    li a {
      padding-left: 20px;
    }
  }
  li {
    .layer-box;
    padding-right: 20px;
    border-bottom: 1px solid #e4e4e4;
    &:last-child {
      border-bottom: 0 none;
    }
    a {
      .p-rel;
      .d-block;
      .text-middle(50px);
      padding-left: 44px;
      padding-right: 20px;
      font-size: @fs-14;
      color: @g-333;
      &.right {
        padding-right: 55px;
        &:after {
          content: normal;
        }
        .fb-switch {
          .p-abs;
          .fn-pos-tr(50%, 0);
          margin-top: -12px;
        }
      }
      &:after {
        content: "";
        display: block;
        width: 8px;
        height: 16px;
        background: url("@{img}/sprite.png") no-repeat -150px -48px;
        background-size: 300px 300px;
        .p-abs;
        .fn-pos-tr(50%, 0);
        margin-top: -7px;
      }
      i {
        .p-abs;
        .fn-pos-tl(50%, 5px);
        margin-top: -15px;
      }
      span {
        .fl;
      }
      label {
        .fr;
        color: @blue-2c97ff;
      }
    }
  }
  + .fb-menu-btn {
    a.fb-btn {
      .text-middle(50px);
    }
  }
}

//置顶
.go-top {
  z-index: 101;
  display: none;
  width: 33px;
  height: 33px;
  top: auto;
  left: auto;
  right: 10px;
  bottom: 60px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/*侧边弹窗*/
.fb-pop-disk {
  .layer-box-height;
  .p-abs;
  .fn-pos-tl(0, 0);
  .d-none;
  background: rgba(0, 0, 0, 0.7);
  &.black {
    background: rgba(0, 0, 0, 0.9);
    .fb-pop-box {
      background: transparent;
      .fb-disk-hd {
        .fb-disk-title {
          color: @white;
        }
      }
      .fb-disk-close {
        color: @white;
      }
    }
  }
  &.block {
    .d-block;
  }
  .fb-pop-box {
    .layer-box-height;
    .p-abs;
    .fn-pos-tl(0, 0);
    background: #ffffff;
    &.top {
      padding-top: 41px;
    }
    &.width {
      width: 80%;
    }
    &.height {
      height: 80%;
      &.small {
        height: 260px;
      }
    }
    &.right {
      left: auto;
      right: 0;
    }
    &.bottom {
      top: auto;
      bottom: 0;
    }
    .fb-disk-hd {
      .layer-box;
      .p-abs;
      .fn-pos-tl(0, 0);
      height: 41px;
      padding: 0 15px;
      border-bottom: 1px solid @g-e4e4;
      &.big {
        height: 45px;
        .fb-disk-title {
          .text-middle(44px);
          font-size: @fs-18;
          font-weight: normal;
          padding: 0 50px;
        }
        .fb-disk-close {
          width: 44px;
          .text-middle(44px);
          font-size: 2.8rem;
        }
      }
      &.no-bd {
        border-bottom: 0 none;
      }
      &.bigger-pad {
        padding: 0 20px;
      }
      .fb-disk-title {
        .layer-box-height;
        color: @g-333;
        text-align: center;
        line-height: 40px;
        font-size: @fs-14;
        &.big {
          font-size: @fs-15;
        }
        &.blue {
          color: @blue-2c97ff;
        }
        &.blod {
          font-weight: bold;
        }
      }
    }
    .fb-disk-bd {
      .layer-box-height;
      &.bigger-pad {
        padding: 0 20px;
      }
      &.gray {
        background: #f4f4f4;
      }
      &.bottom {
        padding-bottom: 46px;
      }
      .fb-disk-footer {
        .layer-box;
        .p-abs;
        .fn-pos-bl(0, 0);
        height: 46px;
      }
    }
    .fb-disk-close {
      .p-abs;
      .fn-pos-tr(0, 0);
      width: 40px;
      height: 40px;
      line-height: 36px;
      text-align: center;
      font-size: 2.4rem;
      color: @g-999;
      font-family: "宋体", arial, helvetica, sans-serif;
      i {
        .p-abs;
        .fn-pos-tl(50%, 50%);
      }
    }
  }
}

/*三角*/
.fb-arrow-dir {
  &.top {
    @color: transparent transparent #dcdcdc transparent;
    .fn-arrow-dir(8px, @color);
  }
  &.down {
    @color: #dcdcdc transparent transparent transparent;
    .fn-arrow-dir(8px, @color);
  }
  &.left {
    @color: transparent #dcdcdc transparent transparent;
    .fn-arrow-dir(8px, @color);
  }
  &.right {
    @color: transparent transparent transparent #dcdcdc;
    .fn-arrow-dir(8px, @color);
  }
}

/*按钮*/
.fb-btn {
  .fn-button-style(100%, 40px, @white, @blue-2c97ff, @blue-2c97ff, 3px);
  &.gradient {
    background: linear-gradient(top, rgb(2, 240, 255), rgb(0, 227, 255) 36%, rgb(6, 207, 255) 55%, rgb(0, 136, 255) 100%);
    background: -webkit-linear-gradient(top, rgb(2, 240, 255), rgb(0, 227, 255) 36%, rgb(6, 207, 255) 55%, rgb(0, 136, 255) 100%);
  }
  &.none {
    background: linear-gradient(top, #e2e2e2, #d1d1d0 36%, #b5b5b5 55%, #a09f9f 100%);
    background: -webkit-linear-gradient(top, #e2e2e2, #d1d1d0 36%, #b5b5b5 55%, #a09f9f 100%);
  }
  &.line-block {
    .d-in-block;
    width: auto;
    padding: 0 20px;
  }
  &.big {
    height: 46px;
    line-height: 46px;
  }
  &.small {
    height: 34px;
    line-height: 34px;
  }
  &.background {
    background: transparent;
    font-size: @fs-16;
    .border-radius(5px);
    &.radius {
      .border-radius(30px);
    }
    &.no-br {
      .border-radius(0);
    }
    &.white {
      @color: @white;
      background: @color;
      border: 1px solid @color;
      color: @red-ff3d3d;
    }
    &.red {
      @color: @error-color;
      background: @color;
      border: 1px solid @color;
      color: @white;
    }
    &.gray {
      @color: #eeeff3;
      background: @color;
      border: 1px solid @color;
      color: @g-666;
    }
    &.blue {
      @color: #03bcff;
      background: @color;
      border: 1px solid @color;
      color: @white;
    }
    &.blue-dark {
      @color: #2c97ff;
      background: @color;
      border: 1px solid @color;
      color: @white;
    }
    &.blue-bigger {
      @color: #0386ff;
      background: @color;
      border: 1px solid @color;
      color: @white;
      font-size: 1.8rem;
    }
  }
}

//间距
.layer-margin();
.layer-padding();

//边框
.fn-border-none();

//字号
.font-size(30);

/*圆角*/
.fb-radius-3 {
  .border-radius(3px) !important;
}

.fb-radius-5 {
  .border-radius(5px) !important;
}

.fb-radius-10 {
  .border-radius(10px) !important;
}

.fb-radius-50 {
  .border-radius(50%) !important;
}

/*手势*/
.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.cursor-def {
  cursor: default;
}

/*字体模式-tm{text-module}*/
.tm-bold {
  font-weight: bold;
}

.tm-light {
  font-weight: normal;
}

.tm-uline {
  text-decoration: underline;
}

.tm-del {
  text-decoration: line-through;
}

.tm-none {
  text-decoration: none;
}

.tm-center {
  text-align: center;
}

.tm-left {
  text-align: left;
}

.tm-right {
  text-align: right;
}

.tm-ellipsis {
  .ft-ellipsis;
}

.tm-clamp {
  .ft-clamp(2);
}

.tm-mid {
  vertical-align: middle;
}

.tm-top {
  vertical-align: top;
}

.tm-bto {
  vertical-align: bottom;
}

.tm-indent {
  text-indent: 2em;
}

/*字体颜色-tc{text-color}*/
.tc-333 {
  .text-color(@g-333) !important;
}

.tc-666 {
  .text-color(@g-666) !important;
}

.tc-999 {
  .text-color(@g-999) !important;
}

.tc-fff {
  .text-color(@white) !important;
}

.tc-blue {
  .text-color(@blue-2c97ff) !important;
}

.tc-oag {
  .text-color(#ffad36) !important;
}

.tc-ff4a49 {
  .text-color(#ff4a49) !important;
}

.tc-ff3d3d {
  .text-color(@red-ff3d3d) !important;
}

.tc-user {
  .text-color(@blue-2c97ff) !important;
}

.tc-u-color {
  .text-color(@blue-user) !important;
}

.tc-fe693b {
  .text-color(#fe693b) !important;
}

.tc-error {
  .text-color(@red-ff3d3d) !important;
}

.tc-success {
  .text-color(@success-color) !important;
}

.tc-waring {
  .text-color(@waring-color) !important;
}

/*css3-transform*/
.j-new-animate {
  .fn-transition(all .3s ease);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*左侧进入*/
.animated-left {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);

  transition: transform 0.5s 0s;
  -webkit-transition: transform 0.5s 0s;
  -o-transition: transform 0.5s 0s;
  -moz-transition: transform 0.5s 0s;
}

/*右侧进入*/
.animated-right {
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);

  transition: transform 0.5s 0s;
  -webkit-transition: transform 0.5s 0s;
  -o-transition: transform 0.5s 0s;
  -moz-transition: transform 0.5s 0s;
}

/*上方进入*/
.animated-top {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);

  transition: transform 0.5s 0s;
  -webkit-transition: transform 0.5s 0s;
  -o-transition: transform 0.5s 0s;
  -moz-transition: transform 0.5s 0s;
}

/*下方进入*/
.animated-bottom {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);

  transition: transform 0.5s 0s;
  -webkit-transition: transform 0.5s 0s;
  -o-transition: transform 0.5s 0s;
  -moz-transition: transform 0.5s 0s;
}

.animated-left.active,
.animated-right.active,
.animated-top.active,
.animated-bottom.active {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

/***************************************************************************************/
/********************--------------------分割线--------------------********************/
/***************************************************************************************/
/*j弹窗动画*/
.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

@-webkit-keyframes j-alert-ani {
  0% {
    -webkit-transform: scale(1.1);
    opacity: 0;
  }
  //50% {
  //  -webkit-transform: scale(1.2);
  //  opacity: 1;
  //}
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@keyframes j-alert-ani {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  //50% {
  //  transform: scale(1.2);
  //  opacity: 1;
  //}
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.j-alert-ani {
  -webkit-animation-name: j-alert-ani;
  animation-name: j-alert-ani;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px)
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px)
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px)
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(5);
    -ms-transform: translateX(5px);
    transform: translateX(5px)
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake
}

@-webkit-keyframes rollIn {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes rollIn {
  0% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}